<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel v-show="state.showSearch">
          <el-form
            ref="queryRef"
            :model="tableOptions.queryForm"
            :inline="true"
            label-width="80px"
            @keyup.enter="queryTableData"
          >
            <el-form-item label="流程名称" prop="flowName">
              <el-input
                v-model="tableOptions.queryForm.flowName"
                placeholder="流程名称"
                style="max-width: 180px"
              />
            </el-form-item>
            <el-form-item label="流程key" prop="flowKey">
              <el-input
                v-model="tableOptions.queryForm.flowKey"
                placeholder="流程key"
                style="max-width: 180px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="refresh-left"
                type="warning"
                @click="handleResetQuery"
                >重置</el-button
              >
              <el-button icon="search" type="primary" @click="queryTableData"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
        <vab-query-form-left-panel>
          <el-button
            v-auth="['flowdef/xz']"
            icon="circle-plus"
            type="primary"
            @click="handleAdd"
            >添加</el-button
          >
          <el-button icon="remove" type="danger" @click="handleDelete"
            >批量删除</el-button
          >
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <RightToolBar
            v-model:showSearch="state.showSearch"
            :export="false"
            @export="exportExcel"
            @refresh="queryTableData"
            @toggle="handleToggleSearch"
          />
        </vab-query-form-right-panel>
      </vab-query-form>
      <el-table
        ref="tableRef"
        v-loading="tableOptions.loading"
        border
        :data="tableOptions.dataList"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        :height="tableOptions.height"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column
          prop="id"
          label="流程ID"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column
          prop="flowName"
          label="流程名称"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          prop="flowKey"
          label="流程Key"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          prop="flowIcon"
          label="图标 "
          show-overflow-tooltip
          width="80"
        >
          <template #default="scope">
            <IconifyIconOnline
              :icon="scope.row.icon.name"
              :style="{
                background: scope.row.icon.bgc,
                color: scope.row.icon.color
              }"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="groupDesc"
          label="流程分组"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          prop="statusDesc"
          label="状态"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          prop="version"
          label="版本"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          prop="remark"
          label="备注"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createUserName"
          label="创建人"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column label="操作" width="170" fixed="right">
          <template #default="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <el-dropdown>
                <el-button icon="ArrowDown" text type="primary">
                  功能
                  <arrow-down />
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      icon="view"
                      @click="handleEdit('view', scope.row.id)"
                    >
                      查看
                    </el-dropdown-item>
                    <el-dropdown-item
                      divided
                      icon="view"
                      @click="handleHistory(scope.row.flowKey)"
                    >
                      历史版本
                    </el-dropdown-item>
                    <el-dropdown-item
                      divided
                      icon="edit-pen"
                      @click="handleEdit('edit', scope.row.id)"
                    >
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item
                      divided
                      icon="delete"
                      @click="handleDelete"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button
                icon="edit-pen"
                text
                type="primary"
                @click="handleDesign(scope.row)"
                >设计</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="tableOptions.pagination.current"
        :layout="tableOptions.pagination.layout"
        :page-size="tableOptions.pagination.size"
        :total="tableOptions.pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <!-- 编辑、新增  -->
      <form-dialog ref="formDialogRef" @refresh="queryTableData" />
      <DefHistory ref="historyDialogRef" />
      <CommonDialog
        v-model="designerVisible"
        :border="true"
        fullscreen
        :show-footer="false"
        :show-header="false"
        @closed="designerVisible = false"
      >
        <ProcessDesignerPanel
          v-if="mounted"
          fullscreen
          v-model:processDef="process"
          @closed="designerVisible = false"
        />
      </CommonDialog>
    </div>
  </div>
</template>

<script setup name="FlowDef" lang="ts">
import { useTable } from "@/hooks/table";
import { getLatestPage, delObjs } from "@/api/flow/def";
import { useMessage, useMessageBox } from "@/hooks/message";
import { getTableHeight } from "@/utils/util";
import { cloneObject } from "@/utils/common";
import RightToolBar from "@/components/rightToolBar.vue";
import FormDialog from "./form.vue";
import DefHistory from "./history.vue";
import type { BasicTableProps } from "@/hooks/table";
import ProcessDesignerPanel from "@/views/design/process/ProcessDesignerPanel.vue";

// 定义变量内容
const formDialogRef = ref(null);
// 搜索变量
const queryRef = ref();
const tableRef = ref(null);
const historyDialogRef = ref(null);
const designerVisible = ref(false);
const mounted = ref(false);

const process = ref({
  id: "",
  flowName: "",
  flowKey: "",
  icon: {
    name: "file-icons:omnigraffle",
    bgc: "#4C87F3",
    color: "#FFFFFF"
  },
  formId: "",
  formName: "",
  status: "-1",
  version: 1,
  sort: 1,
  groupId: "1",
  remark: null,
  flowDef: "",
  flowDefJson: null
});

const state = reactive({
  showSearch: true
});

const tableOptions = reactive<BasicTableProps>({
  queryForm: {
    flowName: "",
    flowKey: ""
  },
  autoLoad: true,
  queryFunction: getLatestPage,
  descs: ["create_time"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange,
  downBlobFile
} = useTable(tableOptions, tableRef);

// 导出excel
const exportExcel = () => {
  downBlobFile(
    "/jsonflow/def-flow/export",
    tableOptions.queryForm,
    "def-flow.xlsx"
  );
};

const handleToggleSearch = () => {
  if (state.showSearch) {
    tableOptions.height = getTableHeight(1, true, true) - 10;
  } else {
    tableOptions.height = getTableHeight(0, true, true);
  }
};

const handleAdd = () => {
  formDialogRef.value.show("add");
};

const handleEdit = (type, id) => {
  formDialogRef.value.show(type, id);
};

// 删除操作
const handleDelete = async () => {
  useMessageBox()
    .confirm("此操作将永久删除")
    .then(async () => {
      let ids = tableOptions.dataSelections
        .map(item => item.id)
        .join() as string;
      delObjs(ids).then(res => {
        if (res.code === 200) {
          queryTableData();
          useMessage().success("删除成功");
        } else {
          useMessage().error(res.msg);
        }
      });
    });
};

const handleHistory = flowKey => {
  historyDialogRef.value.show(flowKey);
};

const handleDesign = defFlow => {
  cloneObject(process.value, defFlow);
  mounted.value = true;
  designerVisible.value = true;
};
</script>
<style lang="scss" scoped></style>
